Collection of HTML Color Code

March 9, 2012

Collection of HTML Color Code - HTML color coding is one very important element in designing a blog or website. HTML color codes are needed when going to design or to give color to the blog template, such as the display background, text, border, and on the other.

HTML color code can also be opened and viewed in Photoshop. This code can be combined to give the variation in seeing colors that appear, as well as an effort to beautify the look of blog or website.

The colors in HTML has its own code. For example, white color has a code #FFFFFF, black color has a code #000000, and so forth. The combination of colors in the HTML color code very much, so it is very difficult to memorize one by one. For simplicity, hopefully HTML color codes complete collection below can be useful to use.

Collection of HTML Color Code

#FFFFFF	#FFFFCC	#FFFF99	#FFFF66	#FFFF33	#FFFF00
#FFCCFF	#FFCCCC	#FFCC99	#FFCC66	#FFCC33	#FFCC00
#FF99FF	#FF99CC	#FF9999	#FF9966	#FF9933	#FF9900
#FF66FF	#FF66CC	#FF6699	#FF6666	#FF6633	#FF6600
#FF33FF	#FF33CC	#FF3399	#FF3366	#FF3333	#FF3300
#FF00FF	#FF00CC	#FF0099	#FF0066	#FF0033	#FF0000
#CCFFFF	#CCFFCC	#CCFF99	#CCFF66	#CCFF33	#CCFF00
#CCCCFF	#CCCCCC	#CCCC99	#CCCC66	#CCCC33	#CCCC00
#CC99FF	#CC99CC	#CC9999	#CC9966	#CC9933	#CC9900
#CC66FF	#CC66CC	#CC6699	#CC6666	#CC6633	#CC6600
#CC33FF	#CC33CC	#CC3399	#CC3366	#CC3333	#CC3300
#CC00FF	#CC00CC	#CC0099	#CC0066	#CC0033	#CC0000
#99FFFF	#99FFCC	#99FF99	#99FF66	#99FF33	#99FF00
#99CCFF	#99CCCC	#99CC99	#99CC66	#99CC33	#99CC00
#9999FF	#9999CC	#999999	#999966	#999933	#999900
#9966FF	#9966CC	#996699	#996666	#996633	#996600
#9933FF	#9933CC	#993399	#993366	#993333	#993300
#9900FF	#9900CC	#990099	#990066	#990033	#990000
#66FFFF	#66FFCC	#66FF99	#66FF66	#66FF33	#66FF00
#66CCFF	#66CCCC	#66CC99	#66CC66	#66CC33	#66CC00
#6699FF	#6699CC	#669999	#669966	#669933	#669900
#6666FF	#6666CC	#666699	#666666	#666633	#666600
#6633FF	#6633CC	#663399	#663366	#663333	#663300
#6600FF	#6600CC	#660099	#660066	#660033	#660000
#33FFFF	#33FFCC	#33FF99	#33FF66	#33FF33	#33FF00
#33CCFF	#33CCCC	#33CC99	#33CC66	#33CC33	#33CC00
#3399FF	#3399CC	#339999	#339966	#339933	#339900
#3366FF	#3366CC	#336699	#336666	#336633	#336600
#3333FF	#3333CC	#333399	#333366	#333333	#333300
#3300FF	#3300CC	#330099	#330066	#330033	#330000
#00FFFF	#00FFCC	#00FF99	#00FF66	#00FF33	#00FF00
#00CCFF	#00CCCC	#00CC99	#00CC66	#00CC33	#00CC00
#0099FF	#0099CC	#009999	#009966	#009933	#009900
#0066FF	#0066CC	#006699	#006666	#006633	#006600
#0033FF	#0033CC	#003399	#003366	#003333	#003300
#0000FF	#0000CC	#000099	#000066	#000033	#000000

Read More | Comments

Install Google +1 Button in a Corner of the Blog

August 8, 2011

Previous already posted how to Install the Google +1 button on blogspot, and on this occasion I will share how to Install google +1 button in a corner of the blog at blogspot.

Install google +1 button in a corner of the blog serves to share in the home page, label, as well as posts, everywhere these buttons can appear, not as in the Google +1 button which previously, could only be to share in part in any post . Meanwhile, if installed in a corner of the blog, then Google +1 botton share will remain in place if the blog in drag upward or downward, as seen on this blog PapaTiti Online.

Well if you are interested in installing this way, please follow the steps on below.

1. Login to Blogger
2. Click Design and select Edit HTML
3. Search Code </head>
4. Enter the code below, just above the </head>

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

Note: If you previously already activate this button, way 3 and 4 are skipped only.

5. Find this code ]]></b:skin>
6. Enter the code below just above the ]]></b:skin>

#G_plusone {
position:fixed;_position:absolute;top:10px; right:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+
document.documentElement.clientWidth - offsetWidth); }

Description:
Top: 10px; = position G +1 button and the distance of the up or down
right: 0px; = position G +1 button and distance of the right or left
(Please arrange themselves according to taste)

7. Enter the code below just above the code </body>

<div id='G_plusone'>
<g:plusone size='tall'/>
</div>

Note: For sizes, please see here Install the Google +1 button on blogspot.

8. Save the template and see the results

If you feel that any article on this blog useful and liked it, please click the +1 button on the right sidebar this blog.

May be useful

Read More | Comments (5)

Install Google +1 Button on Blogspot

August 3, 2011

As has been reported in the crowded world of the Internet, Google has made a new feature of Google +1, which is a tool for visitors to the blog / web and search engines to provide an assessment for a blog page / website that has a value greater benefits.

The benefits of installing the Google +1 button is able to influence the search engine to get the best results on the basis of a lot or not Google +1 buttons provided by the visitor on our blog. If the search results on search engines put on the first page article, a visit will be even greater, so that it can affect the visitor traffic on our blog.

To install Google +1 Button, the following steps:

Method One:

For a default blogger template is a congenital blogger, this feature can be made easily through the page elements / gadgets edit, because this feature has been officially added to Blogger. see on the picture below:

Google +1 Button, can be easily displayed by checking the "Show Share Button". Sign in to your dashboard > design > then click edit post on the template, and will appear as shown above.

Method two:

To modify a template instead of the default templates, the feature "share button" usually has been deleted. Therefore, it needs editing HTML templates to add the Google +1 Botton.

1. Edit HTML on the template and search <head> code, then copy the code below and put it under the code <head>

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

2. Then the next step is to put a Google +1 Button on your blog, whether in the sidebar or on the post area, it's up to you, just enter the following code in the position you want.

<g:plusone size="small"></g:plusone>

<g:plusone size="medium"></g:plusone>

<g:plusone size="tall"></g:plusone>

<g:plusone ></g:plusone>

If there are not clear please visit the official website, here

hopefully help.

If you feel that any article on this blog useful and liked it, please click the +1 button on the right sidebar this blog.

Read More | Comments (8)

Using Read More In Pictures

July 21, 2011

Read More in a blog is a line of words that are used to shorten the text in your blog or website. Function of the Read More is to showcase some of the posts on the main page of a blog / website or divide two pages on a post and when clicking on read more, the article displayed in full.

In previous posts had exposed how to make read more, and on this occasion, I will share about how to create read more in pictures.

To make the read more read more in pictures, do as follows:

1. Log into blogger.com
2. Click Layout --- Edit HTML
3. Click the Download full template, just in case if there is an error editing the HTML
4. Check the boxes next to the words "Expand Widget Templates"
5. Find the code read more previously been made as below:

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Read More</a>
</b:if>

6. Change the Read More red in the above code with this code:

<IMG SRC='http://pic60.picturetrail.com/VOL1724/12312346/22573599/376383608.jpg'/>

Description:

The image to be used can be made with your own creations, by first making the desired image and then upload it to the provider directory and use the link / code from the image.

7. When finished save the template, and the results are as used on this blog.

May be useful

(source image/code read more: internet)

Read More | Comments (2)

Restoring to a NoFollow Blog

It has been previously posted on the definition of a blog NoFollow and DoFollow, difference between Dofollow and blog NoFollow, changing into dofollow blog, as well as ways to find blog NoFollow or DoFollow.

And in this occasion, I will share how to restore to a NoFollow blog based on what I know. By default, access Nofollow bloggers there are 3 settings:

1. Backlink url
2. Comments url
3. Followers

To restore a NoFollow blog, we just restore the settings as before.

As usual, download full template first, then on the menu templates check expand widget templates:

1. Returns NoFollow on BackLink url, find the code zippy, then the code 'data: backlink.url', then add the code rel ='nofollow'

<dt class='comment-title'>
<span class='backlink-toggle-zippy'>&#160;</span>
<a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a>
<b:include data='backlink' name='backlinkDeleteIcon'/>
</dt>

2. Returns NoFollow Comments url, find the code 'data:comment.authorUrl', then add the code rel ='nofollow'

<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>

3. Returns NoFollow on Followers, find the code followers, the 'data:follower.displayName' and add the code rel ='nofollow'

<div class='follower'>

<a expr:href='data:follower.profileUrl' expr:title='data:follower.displayName' rel='nofollow'>

Hopefully this can be useful for those who want to return to NoFollow blogs.

Read More | Comments

Installing the ShareThis Button at the Post

July 19, 2011

Install a widget or of the ShareThis button on web/blog is useful to facilitate the visitors who want to share articles via facebook, twitter, etc., on this ShareThis facility. The advantages of the widget or button of this is that we can know the amount of each post that has been distributed. Examples like the picture below or at the end of each post that is on this blog.

If interested and would like to install or use the ShareThis widget or button like the one on this blog, follow these steps. But before, download full template first to keep from error.

1. Login blogger
2. Layout, Edit HTML,
3. Click the Expand Widget Templates
4. Find the code below:

<data:post.body/>

or

<p><data:post.body/></p>

5. Save the following code below the code you're looking for before:

<div style='padding:10px 0px 10px 0px;margin:15px 0px 7px 0px;width:100%;float:left;height:23px;'>
<div style='float:right;'>
<span class='st_twitter_hcount' displayText='Tweet'/><span class='st_facebook_hcount' displayText='Share'/><span class='st_email_hcount' displayText='Email'/><span class='st_sharethis_hcount' displayText='Share'/>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options({publisher:&#39;63b83a98-def5-427f-ac7c-4b24bcff910d&#39;});</script>
</div>
</div>

6. Save the template and see the results.

Note: If you've used readmore, this button will look and perform the full post.

May be useful.

Read More | Comments (2)

Making a Background Color in Blog Postings

June 4, 2011

Make or give the background color on the post is a way to enhance your blog. And of course also be an attraction itself on the post.

To make or give color to the background, easy enough. If ingnin trying to please follow the steps below.

1. The first step before writing a post, click edit HTML and add the following code below

<div style="background:#fffff3; border:1px dotted #F5003D; padding:5px;">

on the edit HTML, please write an article or code in the text

2. after you finish writing the article, add the code </div> as a cover.

Examples like the following:

<div style="background:#fffff3; border:1px dotted #F5003D; padding:5px;">Write an article or code here ... </div>

Description: #fffff3 is the background color code, please change as you wish

Read More | Comments

How to Divide Labels List Becoming 2 or 3 Columns

May 5, 2011

Usually if there is a lot of labels on the blog. And if you select the label list, not a cloud then it will take a lot of places and the labels will look very long. So that the label does not look too long, we can change the label using the label list scroll divide into 2 or 3 columns. And on this occasion papatiti will share tricks to split the label that shaped the list into 2 or 3 columns, such as labels that exist on this blog, which papatiti divided into 3 columns.

If you are interested, please follow the following steps:

1. Login to your Blogger account
2. Click Design
3. Click Edit HTML
4. Put the following code above the ]]></b:skin>

# Label1 ul li {
float: left;
width: 33%;
}

Description:

Width is the width of the column. If the width was 33% as above, then the widget label will be divided into 3. If you want to divide it into two, just change its width 45%.

Selection # Label1 may vary, but by default, the label widget, if you only have one, then the code is correct. However, if you have more than 2 labels widget, then you will have the ID widget label 1, the widget label 2, and so on.

5. Click Save Template

Good luck and try it useful.

Read More | Comments (2)

Create Archive Blog With Scroll Function

For those who have a blog and often post articles using the blog archive display innate, of course, the look in the archives of these blogs will be long and if this disturbing, the way that can be done is to install a scrolling function on the file, as this papatiti blog.

On this occasion I will share experiences on how to create a blog for the archive has the function of the scroll. The steps are as follows:

1. Log in to acount Blogger
2. Select Layout
3. Click Edit HTML
4. Tick the Expand Widget Templates used
5. Find this code <div id='ArchiveList'> or word Archive
6. Add the green code below as scollnya, or
7. Details as below:

<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:150px;'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div></div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>

8. Figures 150px is the height of the scroll box, please adjusted
9. If so click the Save Template and see the results.

Hopefully useful.

Read More | Comments (2)

How To Know Blog Nofollow or Dofollow

April 14, 2011

Many ways can be done to find out the status blogs, blogs status nofollow or dofollow, depending on the browser we use. On this occasion, I will share an easy way to view the status of the visited blog, nofollow or dofollow by right-clicking on Mozilla Browser. This method is quite easy, simply by using the right click on the blog in question.

Do the following:

1. Open blog in existing pages comments
2. Then block the name / link commentator, then right click and select view source selected text
3. For the nofollow usually writing, rel = "nofollow" on the page that appears, as below.

<a href="http://papatitionline.blogspot.com/" rel="nofollow">papanya_Titi</a>

4. For the dofollow, don't have any posts rel = "nofollow", the page that appears, as below

<a href="http://papatitionline.blogspot.com/">papanya_Titi</a>

My advice, we do not need to think about whether the blog is nofollow or dofollow, which remain important mutual friends, and visit other, good luck and greetings bloggers.

Hopefully useful.

Read More | Comments (3)

Change Nofollow Become Dofollow Blogs

Previously been posted on understanding nofollow and dofollow blog, please see here, as well as differences nofollow and dofollow blog, please see here.

At this time I will share how to change nofollow blog become dofollow blogs. As for how something like this:

1. Log in to your Blogger account
2. Click Design
3. Select Edit HTML
4. Check the small box Expand Template Template
5. Find the code below, for ease of use Ctrl + F

<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>

6. Delete the code in bold, so look like this:

<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>

Each template has a different code. Typically, the standard template from google has more than one word nofollow. If the template you have more than one word nofollow, do the above on all nofollow in your template HTML code.

Hopefully useful.

Read More | Comments (2)

How to Change the Name of Blog Authors

April 9, 2011

In this post in a blog we will see the name of the author of this post. But there are also some from the blog owner does not want to display the name in a way eliminate or replace it with another name.

For those who have the desire as above, is easy enough because I've tried it. The steps are as follows:

1. Log in to blogger
2. Select Layout
3. Select Edit HTML
4. Click the small box on Expand Widget Templates
5. Find the code below:

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

6. Replace the red code with a chill like the example below:

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'>desired name</span>
</b:if>
</span>

Description: delete the red text if you don't want to show it

7. Click the preview, save your template if is appropriate.

Hopefully useful.

Read More | Comments

Differences Nofollow and Dofollow Blogs

April 8, 2011

In the previous post already described briefly on the definition of blogs nofollow and dofollow blogs based on what I know. On this occasion I will elaborate on the differences that exist at the nofollow and dofollow blogs. The advantages and disadvantages of course owned the nofollow and dofollow blogs.

The advantages and disadvantages nofollow and dofollow blog as follows:

Nofollow Blog:

Excess Nofollow Blog

1. Safe from spammers who are looking for backlinks perfunctory
2. Google preferable in terms of SEO, because Google would prefer this type
3. Can get traffic from search engines and obtain more stable pagerank
4. More looking for creative posts and if playing SEO, nofollow blogs indispensable
5. More flexible do blogwalking to foster friendship and exchange links without having to be picky, so it is more interactive.

Lack Nofollow Blog

1. Rarely even no comment, except for postings that are useful. But sometimes the posts did not warrant a lot of useful comment. But in some cases, not least that its news nofollow blog commenting much.
2. Sometimes the blog visitors are just looking for information about the writing on the blog.

Dofollow Blog:

Excess Dofollow Blog

1. Our blog will often sought by bloggers dofollow blog search
2. Our posts will usually be given more comments, regardless of whether its news quality / beneficial or not because the visitors just want to get a free backlink from our blog. These backlinks will help to raise their pagerank blog.
3. Increase your pageviews. But too many blogs that pageviewnya nofollow nice though quiet comment
4. Usually the owner of dofollow blogs will be considered as being friendly and generous because it would for the backlink-free.
5. And lastly our satisfaction because the writing noticed by other people

Lack of Dofollow Blog

1. Pagerank blog we could go down
2. Comment could lead gray, not spam but as spam
3. Not so beloved by Google because it gives a lot of outgoing links
4. Prone to attack spammers who want a free backlink. Usually they make a modest critical comments they put a link on our blog. Although for this depends on the commentator
5. If too many links out our blog can be deleted in the list or at least Google's search engine indexes only some pages of our blog. Of course this will make visitors from Google is reduced or even absent. And did not rule out our blog pagerank even down

Thus the picture of the advantages and disadvantages between blogs nofollow and dofollow blogs may be useful for visitors. Which one is better between the nofollow and dofollow blog? It depends on the intent and purpose of the blog owner in question. What is clear, both have advantages and disadvantages of each.

Hopefully useful.

Read More | Comments (1)

Understanding the Nofollow and Dofollow Blogs

Before choosing a nofollow or dofollow for a blog, we should first understand what the purpose of the blog nofollow and dofollow blogs. Based on what I know as follows.

Understanding Nofollow

Nofollow is an HTML attribute value used to instruct some search engines that a hyperlink should not influence the ranking of the target link in the search engine's index. This is intended to reduce the effectiveness of several types of search engine spam, thereby increasing the quality of search engine results and preventing spamdexing from happening. function for attribute values are not intended to impede access to content, or to prevent the content to be indexed by search engines. Nofollow is a term in your blog / website that if we give comments on the blog the link when commenting that our input was not considered a backlink by search engines like google, but still others can be visited through the links that we put in comments. Initially, each gives a chance nofollow blog, meant to reduce spam but can be converted into dofollow.

Understanding Dofollow

Dofollow is the opposite of nofollow, dofollow tag does not really exist, because the only term to distinguish with nofollow links. When you leave your link dofollow, so when search engines read your page and find the link, he will further explore these links so that search engines produce a report, in this case relates to the number of backlinks, or DoFollow is a term in your blog / website if us to comment on the blog so that our input link when commenting it would be considered as a backlink by search engines such as Google. DoFollow Blogs are usually much sought after by poachers pagerank backlinks to increase their blog.

The description above is a glimpse of understanding about the nofollow and dofollow blogs as I know, hopefully can give you some idea.

Read More | Comments (2)

Adding Page Element in the Upper and Lower Post Blog

April 1, 2011

To add the above elements under very simple blog post. Need only do a little modification of the HTML template blogspot.

To not extend the width follow these steps:

1. Loggin into blogger.com with your id
2. Click Layout on the menu dashboar
3. Then click Edit HTML
4. Click Expand Widget Templates
5. Find the code below:

<div id='main-wrapper'><b:section class='main' id='main' showaddelement='no'>

6. If so, replace the words "no" to "yes". So the code becomes:

<div id='main-wrapper'><b:section class='main' id='main' showaddelement='yes'>

7. Click Save Template
8. See results in a Page Element. There will be additional elements on the blog post.
9. To add an element under blog post, simply click the gadget and select the gadget add what you want to add. Then drag the gadget and place it under a blog post.

Hopefully Helpful.

Read More | Comments (2)

Creating Animation Links

Animation links are links that will change color and enlarged when the mouse is directed to serve targeted links. To make the animation link, the following steps:

1. Log in to Blogger
2. Click Layout on the dashboard menu
3. Select Edit HTML
4. Do not forget to click the Expand Widget Templates
5. Search codes a:link { or the code can also be a:visited { and replace the code below with the following code:

a:link {
color:#000000;
font-size: default;
cursor:default;
}

before the modified or original:

a:link {
color: #660000;
text-decoration: none;
}

or

a:visited {
color:#000000
font-size: default;
cursor:default;
}

before the modified or original:

a:visited {
color: #660000;
text-decoration: none;
}

6. Search codes a:hover { and replace the code below with the following code:

a:hover {
color:# 454DF0;
font-size:18px;
font-style:italic;
cursor:wait;
}

before the modified or original:

a:hover {
color: #660000;
text-decoration: underline;
}

Description:
Green color code can be replaced in accordance with desired color code, while the red color code depending on the color code in your template and may not be the same color code on the top.

7. If so, click Save Template, and see the results.

Hopefully useful.

Read More | Comments

How to Install Widgets on the Blog Back to Top

March 26, 2011

Widget "Back to the Top" is very important in pairs on the blog, especially if the blog that we have to have post pages long. If we put this widget on your blog so visitors do not need to scroll the mouse to return to the top of the blog, but visitors can just click the button of the widget, and another advantage of this widget when the button is clicked then the page or on top of the blog will be directly appear.

Ok, so not long to put the widget back to top, follow these steps:

1. Log in to http://blogger.com
2. Click the Layouts in dashboar menu
3. Click Edit HTML
4. Do not forget to check the Expand Widget Templates
5. Backup first template that my friend had, click on Download Full Template
6. After that search for the code below </b:section>
7. You will find some of the same code from the code, but the search and make sure the code is the code that lies at the very end or bottom in the search.
8. Put the code below right under the code </b:section>
 

<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://i1111.photobucket.com/albums/h461/on23y/TOP2-1.jpg'/></a>

Make sure the code is code that is located on the far end or the bottom. Because in the search, you will find some of the same code. Once again make sure the code is the lowest.

Description:
1. URLs that red is the "Back to the Top" as below:



2. Replace the URL in red with owned. To create a logo or image can be created for example in photoshop or another, and then uploaded to an online storage service to Photobucket let's say, then grab the image URL code.

Hopefully useful.

Read More | Comments

How To Install The Widget Translation By Wearing The Flag Logo

March 21, 2011

The function of the widget is as translator language translation of your blog into other languages in the world. Because its function is very important, then your blog also need to display the widget.

With the translation widget, your visitors from countries that do not understand the language in your blog, they can change the language of your blog with their language.

How to install a blog with the logo flag translation:

1. Log in to Blogger with your ID
2. Click Design
3. Click Add Gadget and select HTML / Javascript
4. Copy the code below into the page that is available

<center>
<a style="cursor: pointer;" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cen&amp;hl=en'); return false;"><img border="0" alt="English" style="cursor: pointer;" src="http://i977.photobucket.com/albums/ae258/SPN_photo/inggris.gif" height="20" title="English" align="absbottom" /></a>

<a style="cursor: pointer;" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cfr&amp;hl=en'); return false;"><img border="0" alt="French" style="cursor: pointer;" src="http://i977.photobucket.com/albums/ae258/SPN_photo/francis.gif" height="20" title="French" align="absbottom" /></a>

<a style="cursor: pointer;" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cde&amp;hl=en'); return false;"><img border="0" alt="German" style="cursor: pointer;" src="http://i977.photobucket.com/albums/ae258/SPN_photo/jerman.gif" height="20" title="German" align="absbottom" /></a>

<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Ces&amp;hl=en'); return false;"><img border="0" alt="Spain" style="cursor: pointer;" src="http://i977.photobucket.com/albums/ae258/SPN_photo/spnyol.gif" height="20" title="Spain" align="absbottom" /></a>

<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cit&amp;hl=en'); return false;"><img border="0" alt="Italian" style="cursor: pointer;" src="http://i977.photobucket.com/albums/ae258/SPN_photo/italia.gif" height="20" title="Italian" align="absbottom" /></a>

<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cnl&amp;hl=en'); return false;"><img border="0" alt="Dutch" style="cursor: pointer;" src="http://i977.photobucket.com/albums/ae258/SPN_photo/belanda.gif" height="20" title="Dutch" align="absbottom" /></a>

<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cru&amp;hl=en'); return false;"><img border="0" alt="Russian" style="cursor: pointer;" src="http://i977.photobucket.com/albums/ae258/SPN_photo/rusia.gif" height="20" title="Russian" align="absbottom" /></a>

<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cpt&amp;hl=en'); return false;"><img border="0" alt="Portuguese" style="cursor: pointer;" src="http://i977.photobucket.com/albums/ae258/SPN_photo/brazilia.gif" height="20" title="Portuguese" align="absbottom" /></a>

<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cja&amp;hl=en'); return false;"><img border="0" alt="Japanese" style="cursor: pointer;" src="http://i977.photobucket.com/albums/ae258/SPN_photo/jepang.gif" height="20" title="Japanese" align="absbottom" /></a>

<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cko&amp;hl=en'); return false;"><img border="0" alt="Korean" style="cursor: pointer;" src="http://i977.photobucket.com/albums/ae258/SPN_photo/koreautara.gif" height="20" title="Korean" align="absbottom" /></a>

<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Car&amp;hl=en'); return false;"><img border="0" alt="Arabic" style="cursor: pointer;" src="http://i977.photobucket.com/albums/ae258/SPN_photo/saudiarabia.gif" height="20" title="Arabic" align="absbottom" /></a>

<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Czh-CN&amp;hl=en'); return false;"><img border="0" alt="Chinese Simplified" style="cursor: pointer;" src="http://i977.photobucket.com/albums/ae258/SPN_photo/cina.gif" height="20" title="Chinese Simplified" align="absbottom" /></a>
</center>

5. Click Save.

Hopefully useful.

Read More | Comments